<template>
	<view class="lay">
		<view class="back-color">
			<!-- 信息 -->
			<view class="userInfo" @click="navTo('/pages/book/addNewFriend/user-info')">
				<view class="info-avatar">
				<!-- 头像 -->
					<u-avatar
						size="45"
						:text="getAvatar(user)"
						shape="square" 
						bg-color="#0080FF"
						font-size='15'
						:src="user.avaUrl">
					</u-avatar>
				</view>
				<!-- 用户名 -->
				<view class="info-name">
					{{user.userName}}
				</view>
				<!-- 图标 -->
				<view class="info-icon">
					<uni-icons type="forward" size="20" color="#D4D4D4"></uni-icons>
				</view>
			</view>
			
			<view class="remarks">
				<view class="content">
					{{user.userName}}:{{remarks}}
				</view>
				<view class="reply" @click="show = true">
					回复
				</view>
				
				<!-- 回复弹出层 -->
				<u-popup 
					:show="show" 
					@close="show = false" 
					@open="show = true"
					mode="center"
					:round="10"
					>
					<view class="pop">
						<view class="reply-label">
							回复							
						</view>

						<view class="reply-input">
							<u-input type="text"></u-input>
						</view>
						<view class="bt">
							<button @click="show = false">取消</button>
							<button @click="show = false" style="color: #0080FF;">发送</button>
						</view>
					</view>
				</u-popup>
				
				
			</view>
		</view>
		<view class="label-remarks">
			<u-cell-group :border="false">
				<u-cell
					size="large"
					title="备注和标签"
					isLink
				></u-cell>
				
				<u-cell
				size="large"
				title="允许对方查看我的手机号"
				:border="false"
				>
				<view slot="value">
					<u-switch v-model="value"></u-switch>
				</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="agree-apply">
			<u-button :text="buttonContent" @click="agreeAdd(buttonContent)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				// 记录是否已经同意好友添加，
				isFlag:0,
				buttonContent:'',
				show:false,
				value:false,
				text:'',
				friends:{},
				user:{
					id:0,
					userName:'陈陳陳',
					avaUrl:'',
					phone:'',
					sex:0,
					signature:'',
					email:'',
					password:'',
					status:false,
				},
				remarks:'我是玉林师范学院的陈陳陳',
			}
		},
		methods: {
			agreeAdd(buttonContent){
				console.log(this.friends);
				if(buttonContent === '通过好友请求'){
					// 添加到数据库中
					uni.request({
						url:"http://localhost:8090/nailCampus/friend/passAdd",
						method:'POST',
						data:this.friends
					})
					this.buttonContent = '发送消息';
				}else{
					uni.navigateTo({
						url:'/pages/chat/chat?id='+this.user.id
					})
				}
			},
			getStatus(){
				if(this.isFlag != 1){
					this.buttonContent = '通过好友请求';
				}else{
					this.buttonContent = '发送消息';
				}
			},
			getAvatar(user){
				if(user.avaUrl == null|| user.avaUrl.length == 0){
					this.text = user.userName.slice(-2);
				}else{
					this.text = null;
				}
				return this.text;
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
		onShow() {

		},
		onLoad(options){
			let _this = this;
			_this.isFlag = options.isFlag;
			uni.request({
				url:"http://localhost:8090/nailCampus/user/getUserById/"+options.id,
				method:'GET',
				success(res) {
					_this.user = res.data.data;
					uni.setStorage({
						key:"friend",
						data:_this.user,
					});
				}
			});
			let token = uni.getStorageSync('token');
			uni.request({
				url:"http://localhost:8090/nailCampus/friend/getFriends/"+options.id,
				header:{
					"token":token
				},
				success(res) {
					_this.remarks = res.data.data.remarks;
					_this.friends = res.data.data;
					console.log(_this.friends);
				}
			});
			this.getStatus();
		},	
	}
</script>

<style lang="less" scoped>
.lay{
	height: 1150rpx;
	background-color: #e8e8e8;
	.back-color{
		background-color: white;
		padding-bottom: 5%;
		.userInfo{
			padding-top: 3%;
			padding-left: 3%;
			padding-bottom: 5%;
			display: flex;
			.info-name{
				width: 77%;
				padding-top: 3%;
				margin-left: 3%;
				font-weight: 600;
				letter-spacing: 2rpx;
			}
			.info-icon{
				margin-top: 3%;
			}
		}
		.userInfo:active{
			background-color: #dcdcdc;
		}
		
		// 备注
		.remarks{
			margin-left: 3%;
			margin-right: 3%;
			padding: 4%;
			border-radius: 10px;
			background-color: #e8e8e8;
			.content{
				font-size: 30rpx;
				color: #A1A1A1;
				padding-bottom: 3%;
				word-wrap: break-word;
				letter-spacing: 2rpx;
			}
			.reply{
				width: 10%;
				font-size: 30rpx;
				color: #0080FF;
			}
			.pop{
				padding-top: 10%;
				background-color: white;
				width: 450rpx;
				height: 250rpx;
				border-radius: 15rpx;
				.reply-label{
					margin-left:8%;
					font-size: 30rpx;
					font-weight: 600;
				}
				.reply-input{
					height: 80rpx;
					border-radius: 6rpx;
					margin-left: 8%;
					margin-right: 8%;
					margin-top: 6%;
					background-color: #e3e3e3;
				}
				.bt{
					margin-top: 5%;
					display: flex;
					button{
						font-weight: 600;
						font-size: 27rpx;
						padding: 0rpx;
						width:50% ;
						background-color: white;
					}
					button::after{
						border-radius: none;
						border-bottom: none;
					}
				}
			}
		}
	}
	.label-remarks{
		background-color: white;
		margin-top: 3%;

	}
	.agree-apply{
		margin-top: 3%;
		background-color: white;
	}
	
}
	

</style>
